<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>xiaxuchen的博客</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="WebPack配置零、预备知识12npm i 框架名称 -S &#x2F;&#x2F;当前项目的依赖npm i 框架名称 -D &#x2F;&#x2F;当前项目开发环境的依赖，不会打包到产物上    一、配置文件分层​    为了合理规范配置，让配置看起来更整洁也便于修改，故将webpack的配置放置在build目录下并改为base、client两个文件，base文件编写公共的配置，而client则根据当前的环境(开发或生产)来进行不同">
<meta property="og:type" content="article">
<meta property="og:title" content="xiaxuchen的博客">
<meta property="og:url" content="http://yoursite.com/2020/08/07/%E5%89%8D%E7%AB%AF/WebPack%E9%85%8D%E7%BD%AE/index.html">
<meta property="og:site_name" content="xiaxuchen的博客">
<meta property="og:description" content="WebPack配置零、预备知识12npm i 框架名称 -S &#x2F;&#x2F;当前项目的依赖npm i 框架名称 -D &#x2F;&#x2F;当前项目开发环境的依赖，不会打包到产物上    一、配置文件分层​    为了合理规范配置，让配置看起来更整洁也便于修改，故将webpack的配置放置在build目录下并改为base、client两个文件，base文件编写公共的配置，而client则根据当前的环境(开发或生产)来进行不同">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="c:/Users/xxc、/AppData/Roaming/Typora/typora-user-images/image-20200202154631021.png">
<meta property="article:published_time" content="2020-08-07T15:08:02.784Z">
<meta property="article:modified_time" content="2020-07-19T10:36:53.951Z">
<meta property="article:author" content="xiaxuchen">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="c:/Users/xxc、/AppData/Roaming/Typora/typora-user-images/image-20200202154631021.png">
  
    <link rel="alternate" href="./atom.xml" title="xiaxuchen的博客" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  
<link rel="stylesheet" href="./css/style.css">

<meta name="generator" content="Hexo 5.0.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="./" id="logo">xiaxuchen的博客</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="./">Home</a>
        
          <a class="main-nav-link" href="./archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="./atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-前端/WebPack配置" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="./2020/08/07/%E5%89%8D%E7%AB%AF/WebPack%E9%85%8D%E7%BD%AE/" class="article-date">
  <time datetime="2020-08-07T15:08:02.784Z" itemprop="datePublished">2020-08-07</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="WebPack配置"><a href="#WebPack配置" class="headerlink" title="WebPack配置"></a>WebPack配置</h2><h3 id="零、预备知识"><a href="#零、预备知识" class="headerlink" title="零、预备知识"></a>零、预备知识</h3><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm i 框架名称 -S //当前项目的依赖</span><br><span class="line">npm i 框架名称 -D //当前项目开发环境的依赖，不会打包到产物上</span><br></pre></td></tr></table></figure>



<h3 id="一、配置文件分层"><a href="#一、配置文件分层" class="headerlink" title="一、配置文件分层"></a>一、配置文件分层</h3><p>​    为了合理规范配置，让配置看起来更整洁也便于修改，故将webpack的配置放置在build目录下并改为base、client两个文件，base文件编写公共的配置，而client则根据当前的环境(开发或生产)来进行不同的配置</p>
<p>目录结构如下:</p>
<p><img src="C:\Users\xxc、\AppData\Roaming\Typora\typora-user-images\image-20200202154631021.png" alt="image-20200202154631021"></p>
<p>​    由于配置文件的位置以及名称改变，故需要修改npm命令选择，指定正确的配置位置，如下:</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&quot;scripts&quot;: &#123;</span><br><span class="line">       &quot;build&quot;: &quot;cross-env NODE_ENV=production webpack --config build/webpack.config.client.js&quot;,</span><br><span class="line">       &quot;dev&quot;: &quot;cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js&quot;</span><br><span class="line">   &#125;</span><br></pre></td></tr></table></figure>

<p>然后由于需要将两个配置文件合并，以前的写法不够优雅，所以使用webpack-merge来进行合并工作，如下:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> mergeConfig = <span class="built_in">require</span>(<span class="string">&#x27;webpack-merge&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> baseConfig = <span class="built_in">require</span>(<span class="string">&#x27;./webpack.config.base&#x27;</span>)</span><br><span class="line"><span class="keyword">let</span> config = mergeConfig(baseConfig,&#123;</span><br><span class="line">        devtool: <span class="string">&#x27;#cheap-module-eval-source-map&#x27;</span>,</span><br><span class="line">        <span class="comment">// 开发模式下直接用</span></span><br><span class="line">        <span class="built_in">module</span>: &#123;</span><br><span class="line">            rules: [...]</span><br><span class="line">        &#125;,</span><br><span class="line">        devServer,</span><br><span class="line">        plugins: defaultPlugins.concat(</span><br><span class="line">            [...]</span><br><span class="line">        )</span><br><span class="line">    &#125;)</span><br></pre></td></tr></table></figure>



<h3 id="二、vue-loader详解"><a href="#二、vue-loader详解" class="headerlink" title="二、vue-loader详解"></a>二、vue-loader详解</h3><p>​    将vue-loader的配置单独分离出来，放置在build/vue-loader.config.js中，便于管理,如下:</p>
<p>vue-loader.config.js</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = <span class="function">(<span class="params">isDev</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">        <span class="comment">// 忽略html中尾部的空格</span></span><br><span class="line">        preserveWhiteSpace: <span class="literal">true</span>,</span><br><span class="line">        <span class="comment">// 将vue template中的css拆分出来</span></span><br><span class="line">        extractCSS: !isDev,</span><br><span class="line">        <span class="comment">// 使用cssModule方式时的配置</span></span><br><span class="line">        cssModules: &#123;</span><br><span class="line">            <span class="comment">// vue文件中的class的名字的生成方式，将类名变为唯一</span></span><br><span class="line">            localIdentName: <span class="string">&#x27;[path]-[name]-[hash:base64:5]&#x27;</span>,</span><br><span class="line">            <span class="comment">// 将class转换为js变量名将-转换为驼峰</span></span><br><span class="line">            camelCase: <span class="literal">true</span></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">// 热更新配置，还是根据环境变量生成</span></span><br><span class="line">        <span class="comment">// hotReload: false</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">// 自定义vue文件代码块，如template、style、script</span></span><br><span class="line">        <span class="comment">// loaders</span></span><br><span class="line">        <span class="comment">// preLoader、postLoader 在loader加载之前加载之后进行加载</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><p>cssModule的概念</p>
<p>我们可以给vue文件的style标签加上module属性</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;style lang&#x3D;&quot;stylus&quot; scoped module&gt;</span><br><span class="line">    .add-input</span><br><span class="line">        position relative</span><br><span class="line">        margin 0</span><br><span class="line">        border 0 solid transparent</span><br><span class="line">        width 100%</span><br><span class="line">        font-family inherit</span><br><span class="line">        font-size 20px</span><br><span class="line">        font-weight 500</span><br><span class="line">        line-height 1.4em</span><br><span class="line">        outline none</span><br><span class="line">        color inherit</span><br><span class="line">        border none</span><br><span class="line">        box-shadow inset 0 -1px 5px 0 rgba(0,0,0,0.1)</span><br><span class="line">        box-sizing border-box</span><br><span class="line">        font-smoothing antialiased</span><br><span class="line">        padding 16px 16px 16px 60px</span><br><span class="line">        border none</span><br><span class="line">        box-shadow inset 0 -2px 1px rgba(0,0,0,0.1)</span><br><span class="line">&lt;&#x2F;style&gt;</span><br></pre></td></tr></table></figure>

<p>这样的话在js中就会有$style变量用于引用style中的class，如$style.addInput</p>
<p>我们可以通过vue-loader的cssModules来配置cssModule中的类名的生成规则，具体看上面配置的代码</p>
</li>
</ul>
<h3 id="三、-eslint"><a href="#三、-eslint" class="headerlink" title="三、 eslint"></a>三、 eslint</h3><ol>
<li><p>安装</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm i eslint eslint-config-standard eslint-plugin-standard  eslint-plugin-promise eslint-plugin-import eslint-plugin-html -D</span><br><span class="line">&#x2F;&#x2F; eslint 依赖</span><br><span class="line"> npm i eslint-loader babel-eslint -D &#x2F;&#x2F; eslint自动检测依赖</span><br></pre></td></tr></table></figure>
</li>
<li><p>配置</p>
<p>.eslintrc</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &#x2F;&#x2F; 使用标准模式</span><br><span class="line">    &quot;extends&quot;: &quot;standard&quot;,</span><br><span class="line">    &#x2F;&#x2F; 使用html插件，可以检查.vue文件</span><br><span class="line">    &quot;plugins&quot;: [</span><br><span class="line">        &quot;html&quot;</span><br><span class="line">    ],</span><br><span class="line">    &#x2F;&#x2F; 因为webpack管理的代码都经过babel处理,故使用babel-eslint</span><br><span class="line">    &quot;parser&quot;: &quot;babel-eslint&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>webpack.config.base.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//...</span></span><br><span class="line"><span class="comment">// 配置自动检测// eslint-loader</span></span><br><span class="line">            &#123; </span><br><span class="line">                test: <span class="regexp">/\.(vue|js|jsx)$/</span>,</span><br><span class="line">                loader: <span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">                exclude: <span class="regexp">/node_modules/</span>,</span><br><span class="line">                <span class="comment">// 在真正的loader处理前处理</span></span><br><span class="line">                enforce: <span class="string">&quot;pre&quot;</span></span><br><span class="line">            &#125;</span><br><span class="line"><span class="comment">//...</span></span><br></pre></td></tr></table></figure>



</li>
</ol>
<h3 id="四、webpack4升级"><a href="#四、webpack4升级" class="headerlink" title="四、webpack4升级"></a>四、webpack4升级</h3><ol>
<li><p>安装</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i webpack webpack-cli webpack-dev-server webpack-merge</span><br></pre></td></tr></table></figure>
</li>
<li><p>配置</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">// 分离代码</span></span><br><span class="line"> optimization: &#123;</span><br><span class="line">         splitChunks: &#123;</span><br><span class="line">             <span class="comment">// 默认把node_modules中的代码打包到一个js</span></span><br><span class="line">             name: <span class="string">&quot;all&quot;</span></span><br><span class="line">         &#125;,</span><br><span class="line">         <span class="comment">// webpack相关代码打包</span></span><br><span class="line">         runtimeChunk: <span class="literal">true</span></span><br><span class="line">     &#125;</span><br><span class="line">   </span><br><span class="line"><span class="comment">//已废弃 new webpack.NoEmitOnErrorsPlugin()</span></span><br></pre></td></tr></table></figure>



</li>
</ol>
<h3 id="最后-一份完整的webpack配置"><a href="#最后-一份完整的webpack配置" class="headerlink" title="最后:一份完整的webpack配置"></a>最后:一份完整的webpack配置</h3><h4 id="webpack-config-js"><a href="#webpack-config-js" class="headerlink" title="webpack.config.js"></a>webpack.config.js</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>) <span class="comment">// nodejs基础包，用于处理路径，如拼接</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> isDev = process.env.NODE_ENV === <span class="string">&#x27;development&#x27;</span> <span class="comment">// 获取环境变量</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> config = &#123;</span><br><span class="line">    target: <span class="string">&#x27;web&#x27;</span>,</span><br><span class="line">    entry: path.join(__dirname, <span class="string">&#x27;../src/main.js&#x27;</span>), <span class="comment">// 入口js，通过入口的内容以及他的依赖进行打包</span></span><br><span class="line">    output: &#123; <span class="comment">// 输出:入口打包的内容输出到哪里</span></span><br><span class="line">        filename: <span class="string">&#x27;bundle.[hash:8].js&#x27;</span>,</span><br><span class="line">        path: path.join(__dirname, <span class="string">&#x27;dist&#x27;</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="built_in">module</span>: &#123;</span><br><span class="line">        rules: [&#123; <span class="comment">// 配置loader处理的文件类型，因为原本只支持.js类型，通过loader机制进行扩展，以支持更多类型</span></span><br><span class="line">                test: <span class="regexp">/\.vue$/</span>,</span><br><span class="line">                use: [</span><br><span class="line">                    <span class="string">&#x27;vue-loader&#x27;</span></span><br><span class="line">                ]</span><br><span class="line">            &#125;, &#123; <span class="comment">// 配置loader处理的文件类型，因为原本只支持.js类型，通过loader机制进行扩展，以支持更多类型</span></span><br><span class="line">                test: <span class="regexp">/\.jsx$/</span>,</span><br><span class="line">                loader: <span class="string">&#x27;babel-loader&#x27;</span></span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                test: <span class="regexp">/\.(jpeg|png|jpg|svg|gif)$/</span>,</span><br><span class="line">                use: [&#123;</span><br><span class="line">                    loader: <span class="string">&#x27;url-loader&#x27;</span>, <span class="comment">// 将图片转换为base64直接放在js中，无需额外加载</span></span><br><span class="line">                    options: &#123; <span class="comment">//配置小于1024kb即可转换base64</span></span><br><span class="line">                        limit: <span class="number">1024</span>,</span><br><span class="line">                        name: <span class="string">&#x27;[name].[ext]&#x27;</span></span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;]</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = config</span><br></pre></td></tr></table></figure>

<h4 id="webpack-client-js"><a href="#webpack-client-js" class="headerlink" title="webpack.client.js"></a>webpack.client.js</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// nodejs基础包，用于处理路径，如拼接</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line">    <span class="comment">// 必须的插件，用于加载.vue文件格式</span></span><br><span class="line"><span class="keyword">const</span> VueLoaderPlugin = <span class="built_in">require</span>(<span class="string">&#x27;vue-loader/lib/plugin&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> webpack = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> ExtractPlugin = <span class="built_in">require</span>(<span class="string">&#x27;extract-text-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> mergeConfig = <span class="built_in">require</span>(<span class="string">&#x27;webpack-merge&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 获取环境变量</span></span><br><span class="line"><span class="keyword">const</span> isDev = process.env.NODE_ENV === <span class="string">&#x27;development&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> baseConfig = <span class="built_in">require</span>(<span class="string">&#x27;./webpack.config.base&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 默认的插件，由于后期会改变，故不放置在base里面</span></span><br><span class="line"><span class="keyword">const</span> defaultPlugins = [ <span class="comment">// 插件</span></span><br><span class="line">    <span class="keyword">new</span> HtmlWebpackPlugin(),</span><br><span class="line">    <span class="keyword">new</span> VueLoaderPlugin(),</span><br><span class="line">    <span class="comment">// 将环境变量暴露到项目中，使得内容可以分模式编译</span></span><br><span class="line">    <span class="keyword">new</span> webpack.DefinePlugin(&#123;</span><br><span class="line">        <span class="string">&#x27;process.env&#x27;</span>: &#123;</span><br><span class="line">            NODE_ENV: isDev ? <span class="string">&#x27;&quot;development&quot;&#x27;</span> : <span class="string">&#x27;&quot;production&quot;&#x27;</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> devServer = &#123;</span><br><span class="line">    port: <span class="number">8001</span>,</span><br><span class="line">    host: <span class="string">&#x27;0.0.0.0&#x27;</span>, <span class="comment">// 本机ip和127.0.0.1都可以访问</span></span><br><span class="line">    overlay: &#123;</span><br><span class="line">        errors: <span class="literal">true</span> <span class="comment">// 遇到错误都打印出来</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 开启热更新</span></span><br><span class="line">    hot: <span class="literal">true</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> config = <span class="literal">null</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 如果是开发环境则添加服务器配置</span></span><br><span class="line"><span class="keyword">if</span> (isDev) &#123;</span><br><span class="line">    config = mergeConfig(baseConfig, &#123;</span><br><span class="line">        <span class="comment">// 不直接使用编译后的代码，而是展示源码映射，方便调试</span></span><br><span class="line">        devtool: <span class="string">&#x27;#cheap-module-eval-source-map&#x27;</span>,</span><br><span class="line">        <span class="comment">// 开发模式下直接用</span></span><br><span class="line">        <span class="built_in">module</span>: &#123;</span><br><span class="line">            rules: [&#123;</span><br><span class="line">                test: <span class="regexp">/\.styl/</span>,</span><br><span class="line">                use: [</span><br><span class="line">                    <span class="string">&#x27;style-loader&#x27;</span>,</span><br><span class="line">                    <span class="string">&#x27;css-loader&#x27;</span>,</span><br><span class="line">                    <span class="comment">// 为stylus加上postcss处理器，同时当其他loader生成sourceMap后复用而不重新创建</span></span><br><span class="line">                    &#123;</span><br><span class="line">                        loader: <span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">                        options: &#123;</span><br><span class="line">                            sourceMap: <span class="literal">true</span></span><br><span class="line">                        &#125;</span><br><span class="line">                    &#125;,</span><br><span class="line">                    <span class="string">&#x27;stylus-loader&#x27;</span></span><br><span class="line">                ]</span><br><span class="line">            &#125;]</span><br><span class="line">        &#125;,</span><br><span class="line">        devServer,</span><br><span class="line">        plugins: defaultPlugins.concat(</span><br><span class="line">            [</span><br><span class="line">                <span class="comment">// 热更新</span></span><br><span class="line">                <span class="keyword">new</span> webpack.HotModuleReplacementPlugin(),</span><br><span class="line">                <span class="keyword">new</span> webpack.NoEmitOnErrorsPlugin()</span><br><span class="line">            ]</span><br><span class="line">        )</span><br><span class="line">    &#125;)</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    config = mergeConfig(baseConfig, &#123;</span><br><span class="line">        <span class="comment">// 生产模式下，将框架的js代码单独出来，方便浏览器缓存</span></span><br><span class="line">        entry: &#123;</span><br><span class="line">            app: path.join(__dirname, <span class="string">&#x27;../src/main.js&#x27;</span>),</span><br><span class="line">            vendor: [<span class="string">&#x27;vue&#x27;</span>]</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="comment">// 生产模式使用chunkHash</span></span><br><span class="line">        output: &#123;</span><br><span class="line">            filename: <span class="string">&#x27;[name].[chunkHash:8].js&#x27;</span></span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="built_in">module</span>: &#123;</span><br><span class="line">            rules: [&#123;</span><br><span class="line">                test: <span class="regexp">/\.styl/</span>,</span><br><span class="line">                use: [</span><br><span class="line">                    <span class="string">&#x27;style-loader&#x27;</span>,</span><br><span class="line">                    <span class="string">&#x27;css-loader&#x27;</span>,</span><br><span class="line">                    <span class="comment">// 为stylus加上postcss处理器，同时当其他loader生成sourceMap后复用而不重新创建</span></span><br><span class="line">                    &#123;</span><br><span class="line">                        loader: <span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">                        options: &#123;</span><br><span class="line">                            sourceMap: <span class="literal">true</span></span><br><span class="line">                        &#125;</span><br><span class="line">                    &#125;,</span><br><span class="line">                    <span class="string">&#x27;stylus-loader&#x27;</span></span><br><span class="line">                ]</span><br><span class="line">            &#125;]</span><br><span class="line">        &#125;,</span><br><span class="line">        optimization: &#123;</span><br><span class="line">            splitChunks: &#123;</span><br><span class="line">                cacheGroups: &#123;</span><br><span class="line">                    commons: &#123;</span><br><span class="line">                        name: <span class="string">&quot;vendor&quot;</span></span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        plugins: defaultPlugins</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = config</span><br></pre></td></tr></table></figure>


      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2020/08/07/%E5%89%8D%E7%AB%AF/WebPack%E9%85%8D%E7%BD%AE/" data-id="ckdkdagu10009vout4u9e2bdv" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="./2020/08/07/%E5%89%8D%E7%AB%AF/%E5%AD%A6%E4%B9%A0UniApp%E9%81%87%E5%88%B0%E7%9A%84%E5%9D%91/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          (no title)
        
      </div>
    </a>
  
  
    <a href="./2020/08/07/%E5%89%8D%E7%AB%AF/vue%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6src%E6%97%A0%E6%95%88/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title"></div>
    </a>
  
</nav>

  
</article>

</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="./archives/2020/08/">August 2020</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="./2020/08/07/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B9%8B%E9%93%BE%E8%A1%A8/">(no title)</a>
          </li>
        
          <li>
            <a href="./2020/08/07/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B9%8B%E6%A0%88%E4%B8%8E%E9%98%9F%E5%88%97/">(no title)</a>
          </li>
        
          <li>
            <a href="./2020/08/07/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B9%8B%E6%95%B0%E7%BB%84/">(no title)</a>
          </li>
        
          <li>
            <a href="./2020/08/07/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE/">(no title)</a>
          </li>
        
          <li>
            <a href="./2020/08/07/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/SpringBoot%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/">(no title)</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2020 xiaxuchen<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="./" class="mobile-nav-link">Home</a>
  
    <a href="./archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  
<link rel="stylesheet" href="./fancybox/jquery.fancybox.css">

  
<script src="./fancybox/jquery.fancybox.pack.js"></script>




<script src="./js/script.js"></script>




  </div>
</body>
</html>